<template>
    <div class="castingManagement">
      <div class="search-bar">
        <el-form
          :inline="true"
          class="search-form"
          ref="test-form"
          :model="searchForm"
          label-width="auto"
          size="small"
          style="display: flex; justify-content: space-between"
        >
          <div class="input-row">
            <el-form-item label="demomID:" class="search-form-item">
              <el-input clearable v-model="form.demomId" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="userID:" class="search-form-item">
              <el-input  clearable v-model="form.userId" placeholder="请输入"></el-input>
            </el-form-item>
  
            <el-form-item label="审核状态:" class="search-form-item">
              <el-select v-model="form.status" placeholder="状态选择">
                <el-option label="待审核" value="0"></el-option>
                <el-option label="通过" value="1"></el-option>
                <el-option label="驳回" value="2"></el-option>
                <el-option label="转移完成" value="4"></el-option>
                <el-option label="划转完成" value="5"></el-option>
              </el-select>
            </el-form-item>
  
            <el-form-item label="划转时间">
              <el-date-picker
                v-model="form.tiem"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <div class="default-btn primary-btn" @click="theQuery">搜索</div>
              <div class="default-btn" @click="clearSearch">重置</div>
            </el-form-item>
          </div>
          <div></div>
        </el-form>
      </div>
  
      <el-table
        :data="dataList"
        border
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <!-- <el-table-column prop="index" label="ID" width="200">
          <template scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="productName" label="商品名称" width="200" />
        <el-table-column prop="denomId" label="denomID" width="200" />
        <el-table-column prop="dawNameId" label="二级铸币ID" width="100" />
        <el-table-column prop="isListClick" label="类型" width="100">
          <template scope="scope">
            <div v-if="scope.row.sceneType == 1" style="color: #409eff">转增</div>
            <div v-if="scope.row.sceneType == 2" style="color: #409eff">提现</div>
            <div v-if="scope.row.sceneType == 3" style="color: #409eff">划转</div>
            <div v-if="scope.row.sceneType == 4" style="color: #409eff">兑换</div>
          </template>
        </el-table-column>
        <el-table-column prop="dawProductCode" label="编码" width="200" />
        <el-table-column prop="content" label="tokenId" width="200" />
        <el-table-column prop="userName" label="用户" width="100" />
        <el-table-column prop="userId" label="用户ID" width="200" />
        <el-table-column prop="hwjUserId" label="海文交userID" width="100" />
        <el-table-column prop="count" label="划转数量" width="50" />
        <el-table-column prop="isListClick" label="是否点选" width="100" />
        <el-table-column prop="remark" label="驳回原因" width="200" />
        <el-table-column prop="createTime" label="申请时间" width="200" />
        <el-table-column prop="updateTime" label="审核时间" width="200" />
  
        <el-table-column prop="nftPercentage" label="资产转移情况" width="60" />
  
        <el-table-column prop="status " label="审核状态" width="100">
          <template scope="scope">
            <div v-if="scope.row.status == 0" style="color: #409eff">待审核</div>
            <div v-if="scope.row.status == 1" style="color: #409eff">通过</div>
            <div v-if="scope.row.status == 2" style="color: #f56c6c">驳回</div>
            <div v-if="scope.row.status == 4" style="color: #409eff">
              转移完成
            </div>
            <div v-if="scope.row.status == 5" style="color: #409eff">
              划转完成
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200">
          <template scope="scope">
            <div v-if="scope.row.status == 0" style="color: #409eff">
              <el-button
                size="mini"
                type="success"
                @click="agree(dataList[scope.$index], 1)"
              >同意</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="agree(dataList[scope.$index], 2)"
              >驳回</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
  
      <!-- 新建品类弹窗 -->
  
  
    </div>
  </template>
  
  <script>
  
  
  
  export default {
  
    data() {
      return {
        dataList: [],
        applicationDetails: false, //详情弹框
        castingShow: false,
        coinsShow: false,
        applyCoinage: false,
        //返回的参数
        itemInOf: "",
        form: {
          demomId: null,
          userId: null,
          status: null,
          sceneType: '1',
          tiem: null
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条,
        },
        searchForm: {
          seckillName: null,
          status: null,
        },
      };
    },
    mounted() {
      this.getDataList(this.page);
    },
    methods: {
      getDataList(page) {
        this.pageLoading = true
        this.$http({
          url: this.$http.adornUrl(`/admin/personnftApply/selectListPage`),
          params: this.$http.adornParams(
            Object.assign({
                pageNum: page == null ? this.page.currentPage : page.currentPage,
                pageSize: page == null ? this.page.pageSize : page.pageSize
              },
              this.form
            )
          ),
          method: 'get'
        }).then(({ data }) => {
          this.dataList = data.list
          this.page.total = data.total
          this.dataListLoading = false
        })
      },
      /**
       铸币
       */
      toMint(e, index) {
        this.dataList[index].buttonType = true;
        this.$http({
          url:
            e.mintType == 0
              ? this.$http.adornUrl(
                `/admin/nftdaw/mintsNftDawNew?applyId=${e.id}`
              )
              : this.$http.adornUrl(
                `/admin/nftdaw/addToMintsNftDawNew?applyId=${e.id}`
              ),
          method: "get",
        }).then(({ data }) => {
          this.getDataList(this.page);
          this.$message({
            type: "success",
            message: "铸币成功",
          });
          this.dataList[index].buttonType = false;
        });
      },
  
      /**
       同意
       */
      agree(e, type) {
        console.log(e.id);
        console.log(type);
        if (type == 1) {
          //同意接口
          this.$confirm("确定要同意操作, 是否继续?", "温馨提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.dataApplication(e.id, type);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消同意",
              });
            });
        } else {
          this.$prompt("请输驳回理由", "温馨提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          })
            .then(({ value }) => {
              this.dataApplicationFail(e.id, type, value);
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "取消输入",
              });
            });
  
  
        }
      },
  
  
      //成功接口
      dataApplication(id, type) {
        let data = {
          status: type,
          id: id,
        };
        this.$http({
          url: this.$http.adornUrl(`/admin/personnftApply/changeCeceiptApply`),
          method: "post",
          data: data,
        }).then(({ data }) => {
          this.getDataList(this.page);
          this.$message({
            type: "success",
            message: "同意成功!",
          });
        });
      },
      //失败
      dataApplicationFail(id, type, content) {
        let data = {
          status: type,
          id: id,
          remark: content,
        };
        this.$http({
          url: this.$http.adornUrl(`/p/nftapply/updateApplyStatus`),
          method: "post",
          data: data,
        }).then(({ data }) => {
          this.getDataList(this.page);
          this.$message({
            type: "success",
            message: "已驳回",
          });
        });
      },
      //查看NFT
      handleClick(e) {
        if (e.status == 0) {
          //待审核
          this.$notify({
            title: "温馨提示",
            message: "请先同意或拒绝申请后在铸币",
            type: "warning",
          });
        } else if (e.status == 1) {
          // 审核失败
          this.$notify.error({
            title: "审核失败",
            message: e.refuseInfo,
          });
        } else {
          //审核成功
          this.itemInOf = e;
          this.coinsShow = true;
          this.$nextTick(() => {
            this.$refs.coins.init();
          });
        }
      },
      /**
       * 打开申请详情弹框
       */
      openFrameApplicationDetails(e) {
        this.itemInOf = e;
        this.applicationDetails = true;
        this.$nextTick(() => {
          this.$refs.applicationDetails.init();
        });
      },
  
      //刷新当前页面
      refreshChange() {
        this.getDataList(this.page);
      },
  
      //点击隐藏铸造弹窗
      castingHidden() {
        this.castingShow = false;
      },
  
      coinsHidden() {
        this.coinsShow = false;
      },
  
      searchChange() {
        this.page.currentPage = 1
        this.page.pageSize = 10
        this.getDataList(this.page)
      },
  
      /**
       *  重置按钮
       */
      clearSearch() {
        this.form.demomId = null
        this.form.userId = null
        this.form.status = null
        this.form.sceneType = '1'
        this.form.tiem = null
        this.getDataList(this.page)
      },
  
      //查询
      theQuery() {
        this.page.currentPage = 1
        this.page.pageSize=10
        this.getDataList(this.page)
      },
  
      //点击显示铸造弹窗
      onCasting() {
        this.castingShow = true;
      },
  
      openApplyCoinage() {
        this.applyCoinage = true;
        this.$nextTick(() => {
          this.$refs.applyCoinage.init();
        });
      },
  
      //分页按钮
      handleSizeChange(val) {
        this.page.pageSize = val;
        // this.pageQuery.pageSize = val
        this.getDataList(this.page);
      },
      handleCurrentChange(val) {
        this.page.currentPage = val;
        // this.pageQuery.pageSize = val
        this.getDataList(this.page);
      },
    },
  };
  </script>
  
  <style scoped>
  .categoryManagement {
    width: 95% !important;
    margin: 30px auto 0;
  }
  .categoryManagement-table-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 30px 0;
  }
  .categoryManagement-table-header div {
    display: flex;
    flex-direction: row;
  }
  .categoryManagement-table-header div .input {
    margin-right: 15px !important;
  }
  
  .categoryManagement >>> .has-gutter tr th .cell {
    text-align: center;
  }
  .categoryManagement >>> .el-table__row td .cell {
    text-align: center;
  }
  </style>
  